import { deleteOne } from '@/services/user';
import { Form, Input, message, Modal, Popconfirm, Space, Table } from 'antd';
import React, { Component } from 'react';
import { connect } from 'umi';
import styles from './index.less';

const editUserLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 19 },
};

class index extends Component {
  state = {
    isEditModalVisible: false,
    editUser: {},
  };
  componentDidMount() {
    const { dispatch } = this.props;
    if (dispatch) {
      dispatch({
        type: 'systemUser/fetchList',
        payload: {},
      });
    }
  }
  // 删除用户
  onConfirm = (id) => {
    const { dispatch, systemUser } = this.props;
    const { query, page } = systemUser;
    deleteOne({ id: id }).then((res) => {
      if (res.code === 200) {
        if (dispatch) {
          console.log(page);
          console.log(query);

          dispatch({
            type: 'systemUser/fetchList',
            payload: { ...query, page: page },
          });
        }
        message.info('操作成功');
      } else {
        message.error(res.msg);
      }
    });
  };

  onCancel = () => {};

  onChangePage = (v) => {
    const { dispatch, systemUser } = this.props;
    const { query } = systemUser;
    if (dispatch) {
      dispatch({
        type: 'systemUser/fetchList',
        payload: { query: query, page: v, page_size: 10 },
      });
    }
  };

  onModelEditOk = () => {
    this.form.submit();

    // this.setState({ isEditModalVisible: false });
  };
  onModelEditCancel = () => {
    this.setState({ isEditModalVisible: false });
  };
  onFinish = (value) => {
    console.log(value);
    const { dispatch } = this.props;
    if (dispatch) {
      dispatch({
        type: 'systemUser/fetchUpdate',
        payload: { ...value, id: this.state.editUser.id },
      });
    }
    // 修改成功
    this.setState({ isEditModalVisible: false, editUser: {} });
  };
  render() {
    const { systemUser } = this.props;
    const { users, total, page } = systemUser;
    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '用户名',
        dataIndex: 'username',
        key: 'username',
      },
      {
        title: '邮箱',
        dataIndex: 'email',
        key: 'email',
      },
      {
        title: '手机号',
        dataIndex: 'phone',
        key: 'phone',
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <Space size="middle">
            <Popconfirm
              title="确定是否删除?"
              onConfirm={this.onConfirm.bind(this, record.id)}
              onCancel={this.onCancel.bind(this)}
              okText="Yes"
              cancelText="No"
            >
              <a style={{ color: 'red' }}>删除</a>
            </Popconfirm>
            <a
              onClick={() => {
                if (this.form) {
                  this.form.setFieldsValue(record);
                }
                this.setState({ isEditModalVisible: true, editUser: { ...record } });
              }}
            >
              编辑
            </a>
          </Space>
        ),
      },
    ];

    return (
      <div>
        <Modal
          title="编辑"
          visible={this.state.isEditModalVisible}
          onOk={this.onModelEditOk.bind(this)}
          onCancel={this.onModelEditCancel.bind(this)}
        >
          <Form
            name="basic"
            {...editUserLayout}
            initialValues={this.state.editUser}
            ref={(ref) => (this.form = ref)}
            onFinish={this.onFinish}
            className={styles.edit_form}
          >
            <Form.Item
              label="用户名"
              name="username"
              rules={[{ required: true, message: '请输入用户名' }]}
            >
              <Input className={styles.item_username} />
            </Form.Item>
            <Form.Item
              label="邮箱"
              name="email"
              rules={[
                {
                  type: 'email',
                  message: 'The input is not valid E-mail!',
                },
              ]}
            >
              <Input className={styles.item_username} />
            </Form.Item>
            <Form.Item label="手机号" name="phone">
              <Input className={styles.item_username} />
            </Form.Item>
          </Form>
        </Modal>

        <Table
          pagination={{ current: page, total: total, onChange: this.onChangePage.bind(this) }}
          columns={columns}
          dataSource={users}
          rowKey="id"
        />
      </div>
    );
  }
}

export default connect(({ systemUser }) => ({
  systemUser,
}))(index);
